<template>
	<div id="search">
		<div class="searchboder">

			<img src="../../public/images/search.png">
			<input placeholder="扫毒" v-model="input" />
			<div class="icon">
				<img src="../../public/images/history.png">
				<img src="../../public/images/down.png">
				<img src="../../public/images/more.png">
			</div>
		</div>
		<!-- <div id="showornot" v-show="Dataexist">

			<div class="history">
				<p>历史搜索</p>
				<img src="../../public/images/clear.png">
			</div>
			<div class="hiscontent">

			</div>
		</div> -->
		<!-- <div class="result">
			
				<div v-for="item in guolv" :key="item.id">
					<!-- <div id="">
						<img :src="item.img">
					</div>
					<p class="name">{{item.name}}</p> -->
				<!-- </div> -->
		<!-- </div> -->
		<div class="coming">
		  <ul>
				<li v-for="item in guolv" :key="item.id">
					<div class="img-wraper"><img :src="item.img"></div>
					<div class="desc-wraper">
						<p class="name">{{item.name}}</p>
						<P class="people">{{item.people}}想看</P>
						<p class="desc-color actors">主演： {{item.actors}}</p>
						<p class="desc-color">未来30天内上映</p>
					</div>
					<div class="button-wraper">
						<button>观看</button>
					</div>
				</li>
			</ul>
		</div>

	</div>
</template>
<script>
	export default {
		name:"search",
		data() {
			return {
				getresult: [], //服务器返回数据
				input: "", //输入框内容
				Dataexist:true ,
			}
		},
		created() {
			this.getSearchData();
			this.showornot()
		},
		methods: {
			// 获取数据
			getSearchData() {
					axios.all([
						axios.get('/mock/coming.json'),
						axios.get('/mock/nowPlayData.json')
					])
					.then(response => {
						console.log(response);
						var a = response["0"].data.coming.length;
						var b = response["1"].data.nowPlayData.length;
						for (var i = 0; i < a + b; i++) {
							if (this.getresult.length < response["0"].data.coming.length) {
								this.getresult[i] = response["0"].data.coming[i]
							} else {
								this.getresult[i] = response["1"].data.nowPlayData[i - response["1"].data.nowPlayData
									.length]
							}
						}
						console.log(this.getresult)
					})
					.catch(function(error) {
						console.log(error)
					})
			},
			showornot(){
				if(this.input=""){
					this.Dataexist=true
				}else{
					this.Dataexist= false
				}
			},
		},
			
		computed: {
			// 监测搜索框
			guolv() {
				// 创建过滤filterResult存储结果
				var filterResult = "";
				if (this.input) {
					filterResult = this.getresult.filter((item) => {
						return item.name.indexOf(this.input) >= 0
					})
					// this.Dataexist=false;
					return filterResult
				} else {
					return false
				};
			
			}
		}
		
	}
</script>

<style scoped>
	#search {
		display: flex;
		flex-direction: column;
		position: fixed;
		height: 600px;
		width: 100%;
		background: white;
		/* justify-content: center; */
		align-items: center;
	}

	.searchboder {
		display: flex;
		margin-top: 10px;
		width: 95%;
		height: 30px;
		border-radius: 5px;
		border-bottom: #d5d5d5 1px solid;
		/* justify-content: center; */
		align-items: center;
		/* border: #000000 1px solid; */
		/* float: left; */
	}

	.searchboder :nth-child(1) {
		margin-right: 15px;
		width: 22px;
		height: 22px;
	}

	.icon :nth-child(1) {
		margin-right: 20px;
		width: 22px;
		height: 22px;
	}

	.icon :nth-child(2) {
		margin-right: 20px;
		width: 22px;
		height: 22px;
	}

	.icon :last-child {

		margin-left: auto;
		width: 20px;
		height: 20px;
	}

	.icon {
		margin-left: auto;
	}

	input {
		font-size: 15px;
		border: 0;
		height: 20px;
		width: 60%;
		/* text-align: left; */
	}

	input::-webkit-input-placeholder {
		color: #adadad;
		position: relative;

	}

	/*  */
	/* .history {
		width: 90%;
		height: 20px;
		margin-top: 10px;
		font-size: 15px;
		display: flex;
		color: #bcbcbc;
	}

	.history p {
		margin-right: auto;
	}

	.history img {
		height: 20px;
		width: 20px;
	} */

	/* .hiscontent {
		width: 90%;
		height: 50px;
		border: 1px solid red;
	} */



	.result img {
		width: 70px;
	}

	li {
		margin: 15px;
		overflow: hidden;
		border-bottom: 1px solid #0b0b0b;
		z-index: 1;
	}

	.desc-color {
		color: white;
		font-size: 14px;
	}

	.name {
		font-size: 18px;
		font-weight: bold;
		color: black;
	}

	.people {
		color: white;
	}

	.actors {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: white;
	}

	p {
		line-height: 25px;
		margin: 0;
	}

	button {
		width: 50px;
		height: 30px;
		border-radius: 5px;
		color: #ffffff;
		background-color:#E54847 ;
		font-weight: bold;
		border: none;

	}
	/* .showornot{
		display: flex;
	} */
	.coming{
		background:white;
		height: 100%;
	}
	.button-wraper{
		float: right;
		line-height:80px;
	}
	img{
		width: 70px;
	}
	.img-wraper{
		width: 23%;
		margin-bottom: 10px;
		float: left;
	}
	.desc-wraper{
		width: 60%;
		float: left;
	}
	li{
		margin: 15px;
		overflow:hidden;
		border-bottom: 1px solid #0b0b0b;
		z-index: 1;
	}
	.desc-color{
		color: white;
		font-size: 14px;
	}
	.name{
		font-size: 18px;
		font-weight:bold;
		color: black;
	}
	.people{
		color: black;
	}
	.actors{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		color: black;
	}
	p{
		line-height:25px;
		margin: 0;
	}
	
</style>
